<template>



    <el-container class="fill fillpanel h">

        <el-header height="2em"><h1>smtp4dev</h1><h2><a href="https://github.com/rnwood/smtp4dev/" target="_blank">https://github.com/rnwood/smtp4dev/</a></h2></el-header>
        <el-main class="fill fillpanel">
            <el-tabs id="maintabs" class="fill" value="messages" type="border-card">
                <el-tab-pane label="Messages" name="messages" class="fillpanel">
                    <span slot="label"><i class="el-icon-message"></i> Messages</span>

                    <div class="fillhalf fillpanel">
                        <messagelist class="fill" @selected-message-changed="selectedMessageChanged" />
                    </div>
                    <div class="fillhalf fillpanel">
                        <messageview class="fill" v-bind:message-summary="selectedMessage" />
                    </div>

                </el-tab-pane>

                <el-tab-pane label="Sessions" name="sessions" class="fillpanel">
                    <span slot="label"><i class="el-icon-document"></i> Sessions</span>

                    <div class="fillhalf fillpanel">
                        <sessionlist class="fill" @selected-session-changed="selectedSessionChanged" />
                    </div>

                    <div class="fillhalf fillpanel">
                        <sessionview class="fill" v-bind:session-summary="selectedSession" />
                    </div>
                </el-tab-pane>

                <el-tab-pane label="Settings" name="settings fillpanel-h">
                    <span slot="label"><i class="el-icon-setting"></i> Settings</span>


                    <div class="fill">
                        <el-alert title="Coming soon!"
                                  type="info"
                                  description="To edit the settings, edit appsettings.json and restart the program"
                                  show-icon />
                    </div>
                </el-tab-pane>
            </el-tabs>

        </el-main>

    </el-container>





</template>


<script src="./home.ts"></script>